<template>
    <div class="container-fluid" id="main">
        <div class="row">
            <div class="col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active">
                                <a href="#home" data-toggle="tab">
                                    第一栏
                                </a>
                            </li>
                            <li><a href="#ios" data-toggle="tab">第二栏</a></li>
                            <li><a href="#charts" data-toggle="tab">第三栏</a></li>
                        </ul>
                        <div id="myTabContent" class="tab-content" :style="{ height: bodyHeight }">
                            <div class="tab-pane fade in active  dealer-list" id="home">
                                <dealer-list></dealer-list>
                            </div>
                            <div class="tab-pane fade" id="ios">
                                <goods></goods>
                            </div>
                            <div class="tab-pane fade" id="charts">
                                <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import DealerList from "./DealerList";
    import Goods from "./Goods"

    export default {
        components: {DealerList, Goods},
        data() {
            return {
                bodyHeight: document.documentElement.clientHeight * 0.75 + 'px',
            }
        }
    }
</script>

<style>
    #main {
        margin-top: 15%;
    }

    .tab-content {
        overflow: auto;
        width: 100%;
    }
</style>

